<template>
  <el-form ref="clueRemarkRefForm" :model="clueRemarkQuery" label-width="125px" :rules="clueRemarkRules">
    <el-form-item label="ID：">
      <div class="detailItem">&nbsp;{{clueDetail.id}}</div>
    </el-form-item>
    <el-form-item label="负责人：">
      <div class="detailItem">&nbsp;{{clueDetail.ownerDO.name}}</div>
    </el-form-item>
    <el-form-item label="关联活动：">
      <div class="detailItem">&nbsp;{{clueDetail.activityDO.name}}</div>
    </el-form-item>
    <el-form-item label="姓名：">
      <div class="detailItem">&nbsp;{{clueDetail.fullName}}</div>
    </el-form-item>
    <el-form-item label="称呼：">
      <div class="detailItem">&nbsp;{{clueDetail.appellationDO.typeValue}}</div>
    </el-form-item>
    <el-form-item label="手机：">
      <div class="detailItem">&nbsp;{{clueDetail.phone}}</div>
    </el-form-item>
    <el-form-item label="微信：">
      <div class="detailItem">&nbsp;{{clueDetail.weixin}}</div>
    </el-form-item>
    <el-form-item label="QQ：">
      <div class="detailItem">&nbsp;{{clueDetail.qq}}</div>
    </el-form-item>
    <el-form-item label="邮箱：">
      <div class="detailItem">&nbsp;{{clueDetail.email}}</div>
    </el-form-item>
    <el-form-item label="年龄：">
      <div class="detailItem">&nbsp;{{clueDetail.age}}</div>
    </el-form-item>
    <el-form-item label="职业：">
      <div class="detailItem">&nbsp;{{clueDetail.job}}</div>
    </el-form-item>
    <el-form-item label="年收入：">
      <div class="detailItem">&nbsp;{{clueDetail.yearIncome}}</div>
    </el-form-item>
    <el-form-item label="住址：">
      <div class="detailItem">&nbsp;{{clueDetail.address}}</div>
    </el-form-item>
    <el-form-item label="是否贷款：">
      <div class="detailItem">&nbsp;{{clueDetail.needLoanDO.typeValue}}</div>
    </el-form-item>
    <el-form-item label="意向状态：">
      <div class="detailItem">&nbsp;{{clueDetail.intentionStateDO.typeValue}}</div>
    </el-form-item>
    <el-form-item label="意向产品：">
      <div class="detailItem">&nbsp;{{clueDetail.intentionProductDO.name}}</div>
    </el-form-item>
    <el-form-item label="线索状态：">
      <div class="detailItem">&nbsp;{{clueDetail.stateDO.typeValue}}</div>
    </el-form-item>
    <el-form-item label="线索来源：">
      <div class="detailItem">&nbsp;{{clueDetail.sourceDO.typeValue}}</div>
    </el-form-item>
    <el-form-item label="线索描述：">
      <div class="detailItem">&nbsp;{{clueDetail.description}}</div>
    </el-form-item>
    <el-form-item label="下次联系时间：">
      <div class="detailItem">&nbsp;{{clueDetail.nextContactTime}}</div>
    </el-form-item>
    <el-form-item label="创建时间：">
      <div class="detailItem">&nbsp;{{clueDetail.createTime}}</div>
    </el-form-item>
    <el-form-item label="创建人：">
      <div class="detailItem">&nbsp;{{clueDetail.createByDO.name}}</div>
    </el-form-item>
    <el-form-item label="编辑时间：">
      <div class="detailItem">&nbsp;{{clueDetail.editTime}}</div>
    </el-form-item>
    <el-form-item label="编辑人：">
      <div class="detailItem">&nbsp;{{clueDetail.editByDO.name}} </div>
    </el-form-item>

    <el-form-item label="历史跟踪记录：">
      <el-table
          :data="clueRemarkList"
          style="width: 100%">
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column property="noteWayDO.typeValue" label="跟踪方式"/>
        <el-table-column property="noteContent" label="跟踪内容"/>
        <el-table-column property="createTime" label="跟踪时间"/>
        <el-table-column property="createByDO.name" label="跟踪人"/>
        <el-table-column property="editTime" label="编辑时间"/>
        <el-table-column property="editByDO.name" label="编辑人"/>
        <el-table-column label="操作" show-overflow-tooltip>
          <template #default="scope"><!--插槽-->
            <a href="javascript:" @click="edit(scope.row.id)">编辑</a>
            &nbsp;
            <a href="javascript:" @click="del(scope.row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="page"
          @prev-click="page"
          @next-click="page" />
    </el-form-item>
  </el-form>

  <!--横线-->
  <hr/>

</template>

<script>
import {doGet} from "@/http/httpRequest";

export default {
  name: "CustomerDetailView",


  data() {
    return {
      //线索详情对象，初始值是空
      clueDetail : {
        ownerDO : {},
        activityDO : {},
        appellationDO : {},
        needLoanDO : {},
        intentionStateDO : {},
        intentionProductDO : {},
        stateDO : {},
        sourceDO : {},
        createByDO : {},
        editByDO : {}
      },
      //跟踪记录列表数据对象，初始值是空
      clueRemarkList : [{
        noteWayDO : {},
        createByDO : {},
        editByDO : {}
      }],
      //分页时每页显示多少条数据，初始值是0
      pageSize : 0,
      //分页时总共有多少条数据，初始值是0
      total : 0,
      //客户详情数据对象，初始值是空
      customerDetail : {}
    }
  },

  mounted() {
    this.loadCustomerDetail();
    this.loadClueRemarkList(1);

  },

  methods : {
    //客户详情
    loadCustomerDetail() {
      let id = this.$route.params.id; //客户id
      doGet("/api/customer/detail/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.customerDetail = resp.data.data;

          this.loadClueDetail(this.customerDetail.clueId);
        }
      })
    },

    //加载线索详情
    loadClueDetail(clueId) {
      doGet("/api/clue/detail/" + clueId, {}).then(resp => {
        if (resp.data.code === 200) {
          this.clueDetail = resp.data.data;
          this.loadClueRemarkList(1);
        }
      })
    },

    //获取线索跟踪记录列表数据（分页）
    loadClueRemarkList(current) {
      doGet("/api/clue/remark", {
        current : current, //前面的current是参数名，后面的current是参数值
        clueId : this.clueDetail.id
      }).then(resp => {
        if (resp.data.code === 200) {
          this.clueRemarkList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数
    page(value) { //value就是要查询的那一页的页码
      this.loadClueRemarkList(value);
    },
  }
}
</script>

<style scoped>
.detailItem {
  background: aliceblue;
  width: 100%;
}
</style>